<template>
    <!-- 组件模板 -->
     <div>
        <font-size-changer
            :default-font-size="defaultFontSize"
            :min-font-size="8"
            :max-font-size="22"
            @changed="handleFontSizeChanged">
            <template v-slot:default>字号大小：</template>
            <template v-slot:decrease>减小</template>
            <template v-slot:increase>增大</template>
            <template v-slot:reset>重置</template>
        </font-size-changer>
     </div>
    <div>
        <table class="student-table" :style="{'font-size': fontSizeCssValue}">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>是否团员</th>
                    <th>班级</th>
                    <th>专业</th>
                    <th>邮箱</th>
                    <th>操作</th>                 
                </tr>
            </thead>
            <tbody>
                <tr v-for="(student, index) in students"
                    :class="{'male-student': student.gender == '男',
                             'female-student': student.gender == '女'
                    }">
                    <td>{{ index + 1 }}</td>
                    <td>{{ student.studentNo }}</td>
                    <td>{{ student.name }}</td>
                    <td>{{ student.gender }}</td>
                    <td>{{ student.tuan_yuan ? "是" : "否" }}</td>
                    <td>{{ student.class }}</td>
                    <td>{{ student.subject }}</td>
                    <td><a v-bind:href="'mailto:' + student.email">{{ student.email }}</a></td>
                    <td><a href="" @click.prevent="onModify(student.studentNo)">修改</a></td>                   
                </tr>
            </tbody>
        </table>
        <!-- <p v-for="(student, index) in students">{{ index + 1 }}、{{ student }}</p> -->
    </div>
    <div>
        <form action="" @submit.prevent="saveStudent">
            <div>
                <label for="">学号：</label>
                <input type="text" v-model="editingStudent.studentNo" :disabled="formState == 'modify'">
            </div>
            <div>
                <label for="">姓名：</label>
                <input type="text" v-model="editingStudent.name">
            </div>
            <div>
                <label for="">性别：</label>
                <label><input type="radio" value="男" v-model="editingStudent.gender" name="gender"> 男</label>
                <label><input type="radio" value="女" v-model="editingStudent.gender" name="gender"> 女</label>
            </div>
            <div>
                <label for="">是否团员：</label>
                <input type="checkbox" v-model="editingStudent.tuan_yuan">
            </div>
            <div>
                <label for="">专业：</label>
                <select v-model="editingStudent.subject">                    
                    <option :value="subject.name" v-for="subject in subjects">{{ subject.name }}</option>
                </select>
            </div>
            <div>
                <label for="">班级：</label>
                <select v-model="editingStudent.class">                    
                    <option :value="clazz.name" v-for="clazz in classOnSelect">{{ clazz.name }}</option>
                </select>
            </div>
            <div>
                <label for="">Email：</label>
                <input type="text" v-model="editingStudent.email">
            </div>
            <button type="submit">保存</button>
        </form>
    </div>
</template>

<script setup>
// 这里写JavaScript代码，不要忘记setup属性！
import { ref, computed, onMounted, reactive, watch } from 'vue';
import axios from 'axios';
import FontSizeChanger from './components/FontSizeChanger.vue';

const students = ref([])
const newStudentInit = {
    "studentNo": "",
    "name": "",
    "class": "",
    "subject": "",
    "gender": "",
    "email": "",
    "tuan_yuan": true,
    "profile": ""
}
const editingStudent = reactive({...newStudentInit});
const subjects = ref([]);
const classes = ref([]);
const classOnSelect = ref([])

const formState = ref('add');
let editingStudentNo = null;
const defaultFontSize = 14;
const fontSize = ref(defaultFontSize);

const fontSizeCssValue = computed(() => {
    return fontSize.value + 'px';
})


function saveStudent() {
    if(formState.value == "add") {
        students.value.push({...editingStudent});
        Object.assign(editingStudent, newStudentInit);
    } else if(formState.value == "modify") {
        let s = students.value.find((s) => s.studentNo == editingStudentNo);
        Object.assign(s, editingStudent);
        Object.assign(editingStudent, newStudentInit);
        formState.value = "add";
    }
    
}

function handleFontSizeChanged(newFontSize) {
    fontSize.value = newFontSize;
}

onMounted(() => {
    // 组件装载完成后执行的初始化代码
    // student_api是要通过AJAX访问的资源的地址
    const student_api = "/api/student_data.json";
    const subject_api = "/api/subject_data.json";
    const class_api = "/api/class_data.json";

    axios.get(student_api)
    .then((response) => {
        // response为返回的“响应”对象
        students.value = response.data;
    })
    .catch(error => {
        // 处理错误
        console.error(error);
    })

    axios.get(subject_api)
    .then((response) => {
        // response为返回的“响应”对象
        subjects.value = response.data;
    })
    .catch(error => {
        // 处理错误
        console.error(error);
    })

    axios.get(class_api)
    .then((response) => {
        // response为返回的“响应”对象
        classes.value = response.data;
    })
    .catch(error => {
        // 处理错误
        console.error(error);
    })
})

// function handleSubjectChange() {
//     classOnSelect.value = classes.value.filter((c) => c.subject == newStudent.subject)
// }

watch(() => editingStudent.subject, (newSubject) => {
    classOnSelect.value = classes.value.filter((c) => c.subject == newSubject);
})

function onModify(studentNo) {
    let s = students.value.find((s) => s.studentNo == studentNo);
    // editingStudent.studentNo = s.studentNo;
    // editingStudent.name = s.name;
    Object.assign(editingStudent, s);
    formState.value = "modify";
    editingStudentNo = studentNo;
}
</script>

<style lang="scss">
// 必须引入颜色模块
@use "sass:color";

$main-color: rgb(55, 91, 234);
$text-color: #333;
$highlight-color: rgb(234, 88, 55);
.student-table {
    width: 90%;
    th {
        color: white;
        background-color: color.adjust($main-color,  $lightness: -15%);
    }
    th, td {
        padding: 3px;
    }
    td:not(:last-child) {
        text-align: center;
    }
    tr {
        &.male-student {
            background-color: rgb(240, 248, 255);
        }
        &.female-student {
            background-color: rgb(255, 240, 252);
        }
    }
    a {
        text-decoration: none;
        color: $main-color;
        &:hover {
            text-decoration: underline;
            color: $highlight-color;
        }
    }
}
</style>